<template>
	<div class="fullscreen">
		<sh-form ref="shform" v-bind="formConfig"> </sh-form>
		<sh-button @click="getFormData">提交</sh-button>
	</div>
</template>

<script>
export default {
	name: 'BaseForm',
	data() {
		return {
			formConfig: {
				loading: false,
				data: {},
				items: [
					{
						title: '左侧',
						span: 12,
						children: [
							{
								title: '姓名',
								field: 'name',
								renderRequire: true,
								renderProps: {},
								requireProps: [
									{
										required: true,
										validator: () => {
											return new Error('999')
										}
									}
								]
							},
							{
								title: '性别',
								field: 'sex',
								renderRequire: false,
								renderName: '$vSelect',
								renderProps: {
									options: [
										{ label: '男', value: '1' },
										{ label: '女', value: '2' }
									]
								}
							},
							{
								title: '手机号码',
								field: 'tel',
								renderRequire: false
							},
							{
								title: '年龄',
								field: 'age',
								renderRequire: false,
								renderName: '$vInput',
								renderProps: {
									type: 'integer',
									min: 1,
									max: 150
								}
							},
							{
								title: '出生日期',
								field: 'birthday',
								renderRequire: false,
								renderName: '$vTime',
								renderProps: {}
							},
							{
								title: '身份证号',
								field: 'idCard',
								renderRequire: false
							},
							{
								title: '身高',
								field: 'height',
								renderRequire: false,
								renderName: '$vInput',
								renderProps: {
									type: 'number',
									min: 1,
									max: 300,
									suffixText: '厘米/CM'
								}
							},
							{
								title: '体重',
								field: 'weight',
								renderRequire: false,
								renderName: '$vInput',
								renderProps: {
									type: 'number',
									min: 1,
									max: 300,
									suffixText: '公斤/Kg'
								}
							},
							{
								title: '邮编',
								field: 'postCode',
								renderRequire: false,
								renderName: '$vInput',
								renderProps: {
									type: 'integer',
									maxlength: 6
								}
							},
							{
								title: '电子邮箱',
								field: 'email',
								renderRequire: false
							}
						]
					},
					{
						title: '右侧',
						span: 12,
						children: [
							{
								title: '购买数量',
								field: 'buyNumber',
								span: 24,
								renderRequire: false,
								renderName: '$vInput',
								renderProps: {
									type: 'number',
									control: true
								}
							},
							{
								title: '单价',
								field: 'buyPrice',
								span: 24,
								renderRequire: false,
								renderName: '$vInput',
								renderProps: {
									type: 'number'
								}
							},
							{
								title: '总价',
								field: 'buyTotal',
								span: 24,
								renderRequire: false,
								renderName: '$vInput',
								renderProps: {
									readonly: true,
									type: 'number',
									formula: '{buyNumber}*{buyPrice}'
								}
							},
							{
								title: '婚否',
								field: 'isMerry',
								span: 24,
								renderRequire: false,
								renderName: '$vSwitch',
								renderProps: {
									options: []
								}
							},
							{
								title: '联系地址',
								field: 'contactAddress',
								span: 24,
								renderRequire: false,
								renderName: '$vTextArea',
								renderProps: {
									maxlength: 150
								}
							}
						]
					},
					{
						title: '籍贯',
						field: 'jiguan',
						search: true,
						span: 12,
						renderName: '$vTree',
						renderProps: {
							multiple: false,
							options: [
								{ id: '1', label: '北京' },
								{ id: '2', label: '黑龙江' },
								{ id: '3', label: '吉林' },
								{ id: '4', label: '辽宁' },
								{ id: '5', label: '山东' },
								{ id: '6', label: '陕西' },
								{ id: '7', label: '山西' },
								{ id: '8', label: '湖南' },
								{ id: '9', label: '湖北' },
								{ id: '10', label: '上海' },
								{ id: '11', label: '广东' },
								{ id: '12', label: '广西' }
							]
						}
					},
					{
						title: '校验参数',
						field: 'requireProps',
						width: 150,
						span: 24,
						renderName: '$vTable',
						renderProps: {
							columns: [
								{
									title: '是否校验',
									field: 'required',
									width: 150,
									renderName: '$vSelect',
									renderProps: {
										options: [
											{ value: '0', label: '否' },
											{ value: '1', label: '是' }
										],
										defaultValue: '1'
									}
								},
								{
									title: '错误提示信息',
									field: 'message',
									minWidth: 200,
									renderName: '$vInput'
								},
								{
									title: '校验匹配规则',
									field: 'pattern',
									width: 300,
									renderName: '$vInput'
								},
								{
									title: '最小值',
									field: 'min',
									renderName: '$vInput',
									width: 150,
									renderProps: { type: 'number' }
								},
								{
									title: '最大值',
									field: 'max',
									renderName: '$vInput',
									width: 150,
									renderProps: { type: 'number' }
								},
								{
									title: '数据类型',
									field: 'type',
									width: 150,
									renderName: '$vSelect',
									renderProps: {
										options: [
											{ value: 'string', label: 'string' },
											{ value: 'number', label: 'number' },
											{ value: 'array', label: 'array' }
										]
									}
								},
								{
									title: '触发方式',
									field: 'trigger',
									width: 150,
									renderName: '$vSelect',
									renderProps: {
										options: [
											{ value: 'blur', label: 'blur' },
											{ value: 'change', label: 'change' },
											{ value: 'manual', label: 'manual' }
										]
									}
								}
							],
							columnObj: { sortable: false, filter: false },
							editConfig: { showIcon: false },
							editRules: {
								required: [{ required: true, message: '请选择是否校验' }],
								message: [{ required: true, message: '请输入错误提示信息' }]
							},
							globalConfig: { seq: false, selectType: 'checkbox', tools: ['addRow', 'deleteRow'] },
							height: 140,
							pagerConfig: false,
							disabled: false
						}
					}
				],
				rules: {},
				footer: true,
				isItemTitle: false,
				formConfig: {
					span: 12
				}
			}
		}
	},
	created() {},
	mounted() {},
	methods: {
		getFormData() {
			console.log(this.formConfig.data)
		}
	}
}
</script>

<style scoped></style>
